<template>
	<view class="popup">
		<u-popup v-model="show" mode="bottom">
			<view class="popup_up">
				<view class="title" :class="[type == 1 ? 'cgreen' : type == 2 ? 'cviolet' :  type == 3 ? 'cred' : 'cblue' ]">
					{{ popTitle }}
				</view>
				<view class="contract pop_title u-m-l-40">
					{{ $t('game.contr2') }}
				</view>
				
				<view class="money u-m-l-40">
					<view class="money_item" v-for="(item, index) in moneyList" :key="index" 
					:class="{'cgreen': item.num == money && type == 1,'cviolet': item.num == money && type == 2,'cred': item.num == money && type == 3,'cblue': item.num == money && type == 4, 'select_bg': item.num == money }"
					@click="changeMoney(item.num)">
						{{ item.label }}
					</view>
				</view>
				
				<view class="multiples pop_title u-m-l-40">
					{{ $t('game.multiples') }}
				</view>
				
				<view class="number u-m-l-40">
					<view class="number_item" v-for="(item, index) in numList" :key="index" 
					 :class="{'cgreen': item.num == buyNum && type == 1,'cviolet': item.num == buyNum && type == 2,'cred': item.num == buyNum && type == 3,'cblue': item.num == buyNum && type == 4, 'select_bg': item.num == buyNum }"
					 @click="changeBuyNum(item.num)">
						{{ item.num }}
					</view>
				</view>
				
				<view class="numberbox u-m-l-50">
					<u-number-box style="border-radius:20rpx;" v-model="buyNum" @change="valChange" input-width="180" input-height="72" :min="1" :max="maxBuyNum"></u-number-box>
				</view>
				
				<view class="price u-m-l-40 u-m-t-40">
					<text style="font-size:32rpx;color:#17273a;">{{$t('game.cost')}}: </text>
					<text>
						{{ $currency }}{{ +this.money * +this.buyNum}}
					</text>
				</view>
				<view class="price u-m-l-40">
					<text style="font-size:32rpx;color:#17273a;">{{$t('game.reward')}}: </text>
					<text>
						{{ $currency }}{{ +(this.money * +this.buyNum) * ratio}}
					</text>
				</view>
				<view class="button">
					<view class="button_cancel" @click="close">
						{{ $t('common.cancel') }}
					</view>
					<view class="button_confirm" :class="[type == 1 ? 'cgreen' : type == 2 ? 'cviolet' : type == 3 ? 'cred' : 'cblue' ]" @click="confirm">
						{{ $t('common.confirm') }}
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			// 1绿色 2紫色 3红色
			type: {
				type: [String, Number],
				default: 0
			},
			// 购买号码
			selectNum: {
				type: [String, Number],
				default: ''
			},
			maxBuy: {
				type: [String, Number],
				default: 0
			},
			canBuy: {
				type: Boolean,
				default: true
			}
		},
		data () {
			return {
				show: false,
				money: 1000,
				moneyList: [
					{
						label: '1k',
						num: 1000,
						type:1
					},
					{
						label: '10k',
						num: 10000,
						type: 2
					},
					{
						label: '100k',
						num: 100000,
						type: 3
					},
					{
						label: '1000k',
						num: 1000000,
						type: 4
					}
				],
				numList: [
					{
						num: 3,
						type: 1
					},
					{
						num: 5,
						type: 2
					},
					{
						num: 10,
						type: 3
					}
				],
				buyNum: 3
			}
		},
		computed: {
			popTitle() {
				let title = ''
				switch(+this.type) {
					case 1:
						title = this.$t('game.jgreen')
						break
					case 2:
						title = this.$t('game.jviolet')
						break
					case 3:
						title = this.$t('game.jred')
						break
					case 4:
						title = `${this.$t('game.select')} ${this.selectNum}`
						break
				}
				return title
			},
			maxBuyNum() {
				return parseInt(+this.maxBuy / +this.money / 10)
			},
			ratio() {
				let ratio = 0;
				if (this.type) {
					if (this.type == 1) {
						ratio = 2;
					}
					if (this.type == 2) {
						ratio = 4.5;
					}
					if (this.type == 3) {
						ratio = 2;
					}
				}
				if (this.selectNum !== '') {
					ratio = 9;
				}
				return ratio;
			}
		},
		methods: {
			open() {
				if(this.canBuy) this.show = true
			},
			close () {
				this.show = false
			},
			changeMoney(e) {
				this.money = e
			},
			changeBuyNum(e) {
				this.buyNum = e
			},
			valChange(e) {
				this.buyNum = e.value
			},
			confirm() {
				let obj = {
					money: this.money,
					buyNum: this.buyNum,
					color: this.type != 4 ? this.type : '',
					number: this.type == 4 ? this.selectNum : ''
				}
				this.$emit('confirm', obj)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup {
		
		.popup_up {
			// min-height: 670rpx;
			height: 100%;
			position: relative;
			padding-bottom: 88rpx;
			
			.title {
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				color: #fff;
				font-size: 40rpx;
				font-family: Roboto, Roboto-Medium;
				font-weight: 500;
			}
			.cgreen {
				background: #55E273;
			}
			
			.cviolet {
				background: #FF62FF;
			}
			
			.cred {
				background: #FF4343;
			}
			
			.cblue {
				background: #3A89FF;
			}
			
			.contract {
				margin-top: 38rpx;
			}
			
			.pop_title {
				font-size: 32rpx;
				font-family: Roboto, Roboto-Medium;
				font-weight: 500;
				color: #17273a;
			}
			.money {
				margin-top: 26rpx;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				border-radius: 4rpx;
				
				.money_item {
					width: 126rpx;
					height: 82rpx;
					line-height: 82rpx;
					color: #8B8B8B;
					text-align: center;
					border-radius: 20rpx;
					border: 2rpx solid #b9b9b9;
					margin: 0 12rpx;
				}

				&:first-child {
					margin: 0 12rpx 0 0;
				}
				&:last-child {
					margin: 0 0 0 12rpx;
				}
				
			}
			
			.select_bg {
				color: #fff !important;
			}
			
			.multiples {
				margin-top: 26rpx;
			}
			
			.number {
				margin-top: 26rpx;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				border-radius: 4rpx;
				
				.number_item {
					margin:0 12rpx;
					border-radius: 20rpx;
					width: 126rpx;
					height: 82rpx;
					line-height: 82rpx;
					color: #8b8b8b;
					text-align: center;
					border: 2rpx solid #b9b9b9;
				}
			}
			.numberbox {
				margin-top: 36rpx;

				border-radius: 20rpx;
				/deep/ .u-icon-plus {
					border-radius: 0 20rpx 20rpx 0;
				}
				/deep/ .u-icon-minus {
					border-radius: 20rpx 0 0 20rpx;
				}
				/deep/ .u-icon-plus,
				/deep/ .u-icon-minus {
					width: 82rpx;
				}
			}
			
			.price {
				color: #FF5C5C;
				padding: 12rpx 0;
				
				text {
					margin-left: 6rpx;
					font-size: 36rpx;
					font-weight: 500;
				}
			}
			.button {
				width: 100%;
				position: absolute;
				bottom: 0;
				left: 0;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				font-size: 32rpx;
				font-family: Roboto, Roboto-Regular;
				font-weight: 400;
				
				.button_cancel {
					flex: 1;
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					color: #17273a;
					background: #eeeeee;
				}
				.button_confirm {
					flex: 1.5;
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					color: #fff;
				}
			}
		}
	}
</style>
